<template>
	<p class="unit">(栋)</p>
  <div id="myBarChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getHouseNumCount } from '@/api/buildHouse.js';
const xAxisArr = ref([])
const newProjectArr = ref([])
const reinforceProjectNumArr = ref([])

onMounted(() => {
	getHouseNumCount().then((res) => {
    xAxisArr.value = res.data.map(item=>{return item.province})
    newProjectArr.value = res.data.map(item=>{return item.newProjectNum})
    reinforceProjectNumArr.value = res.data.map(item=>{return item.reinforceProjectNum})
    // 需要获取到element,所以是onMounted的Hook
    let myChart = echarts.init(document.getElementById("myBarChart"));
    // 绘制图表
    const option = {
		  tooltip: {
		    trigger: 'axis',
		    axisPointer: {
		      // Use axis to trigger tooltip
		      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
		    }
		  },
		  legend: {
		  	top: 20,
        right: 20,
		  	textStyle: {
          color: "#fff",
          padding:[0,4]//文字与图形之间的左右间距
        },
        itemWidth: 8,    // 设置图例项的宽度为8像素
  			itemHeight: 8    // 设置图例项的高度为8像素
		  },
		  grid: {
		    left: '3%',
		    right: '4%',
		    bottom: '3%',
		    containLabel: true
		  },
		  dataZoom: [//滑动条
        {
          yAxisIndex: 0, //这里是从Y轴的0刻度开始
          show: false, //是否显示滑动条，不影响使用
          type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          startValue: 0, // 从头开始。
          endValue: 4, // 一次性展示几个。
        }
   	  ],
		  xAxis: {
		    type: 'value',
		    // 不显示线条和刻度
				splitLine: {
					show: false,
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false,
				},
		  },
		  yAxis: {
		    type: 'category',
		    data: xAxisArr.value.reverse(),
		    //设置Y轴颜色
	      axisLabel: {
          textStyle: {
            color:' #fff',
          },
        },
        // 不显示线条和刻度
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
	
				splitLine: {
					show: false,
				}
		  },
		  series: [
		    {
		      name: '新建工程',
		      type: 'bar',
		      stack: 'total',
		      label: {
		        show: false,
		        position: 'right',
		        offset: [-30, 0],
		        color: "#050426"
		      },
		      showBackground: false,
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: "#46FFFF",
		      },
		      barWidth: 20, // 设置柱状图宽度为30像素
		      data: newProjectArr.value.reverse()
		    },
		    {
		      name: '加固工程',
		      type: 'bar',
		      stack: 'total',
		      label: {
		        show: false,
						position: 'right',
		        offset: [-30, 0],
		        color: "#050426"
		      },
		      emphasis: {
		        focus: 'series'
		      },
		      showBackground: false,
		      itemStyle: {
		        color: "#FFB35B",
		      },
		      barWidth: 20, // 设置柱状图宽度为30像素
		      data: reinforceProjectNumArr.value.reverse()
		    },
		  ]
		}
		var timer = null;
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
      // 每次向后滚动一个，最后一个从头开始；
      // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
      if (option.dataZoom[0].endValue == res.data.length - 1) {
        option.dataZoom[0].endValue = 4;
        option.dataZoom[0].startValue = 0;
      }
      else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
      }
      myChart.setOption(option,true); // 这条不能省略；

	}, 2000);
	myChart.setOption(option,true);
    window.onresize = function () { // 自适应大小
      myChart.resize();
    };
	})
   
})

onBeforeUnmount(() => {
	let myChart = echarts.init(document.getElementById("myBarChart"));
	myChart.dispose();
})

</script>
<style lang='scss' scoped>
.unit{
	height: 18px;
	font-size: 18px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
	top:15px;
	right: 10px;
}
#myBarChart{
  width: 420px;
  height: 225px;
  margin: -40px auto 0;
  font-size: 14px;
}
</style>